<template>
  <div class="logsbut-wrap">
    <a class="logsbut" @click.stop="showLogs">
      <span>操作日志</span>
      <i class="iconfont icon-message"></i>
      <b>{{logs}}</b>
    </a>
    <logs :visible.sync="logsDialog.visible"></logs>
  </div>
</template>

<script>
  import LogsApi from '@/api/log';
  import {formatDate} from '@/ui/common/lang/date';
  import Logs from "./logs";

  export default {
	name: "logsbut",
	components: {Logs},
	data() {
	  return {
		timer: null,
		logs: 0,
		query: {
		  opsTime: ''
		},
		logsDialog: {
		  visible: false
		}
	  }
	},
	mounted() {
	  this.query.opsTime = formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss');
	  this.load();
	},
	methods: {
	  load: function () {
		LogsApi.news(this.query).then(res => {
		  this.logs = res.obj || 0;
		  this.task();
		}).catch(() => {
		  this.task();
		});
	  },
	  task: function () {
		if (this.timer != null) {
		  clearTimeout(this.timer);
		}
		this.timer = setTimeout(() => {
		  this.load();
		}, 15000);
	  },
	  showLogs: function () {
		this.query.opsTime = formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss');
		this.logs = 0;
		this.logsDialog.visible = true;
	  }
	},
	destroyed() {
	  if (this.timer != null) {
		clearTimeout(this.timer);
	  }
	}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @require "../../ui/common/stylus/variable.styl"
  .logsbut {
    position fixed;
    bottom 10px;
    right 10px;
    background-color $color-white;
    box-shadow 1px 2px 5px $color-border;
    display: flex;
    align-items: center;
    text-align center;
    cursor pointer;
    color $color-light-grey;
    border-radius 50%;

    span {
      font-size 16px;
      padding 0 10px;
      padding-left 20px;
      display none;
    }

    i {
      font-size 35px;
      display block;
      text-align center;
      width 60px;
      height 60px;
      line-height 60px;
    }

    b {
      position absolute;
      font-size 10px;
      right 10px;
      top 3px;
      background-color $color-danger;
      color $color-white;
      display block;
      padding 1px 2px;
      border-radius 50%;
    }

    &:hover {
      border-radius 30px;
      background-color $color-danger;
      color $color-white;

      span {
        display inline-block;
      }
    }
  }
</style>